<template>
    <div>
        <div class="seatchContainer">
            名称 <input type="text" placeholder="请输入搜索内容" v-model="searchTxt" @input="searchTxtChange"><button
                @click="search">查询</button>
        </div>
        <table>
            <thead>
                <tr>
                    <th style="text-align: center;" v-for="(title, tidx) in titles" :key="tidx">{{title}}</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in info" :key="item.id" v-show="item.is_show">
                    <td>{{item.id}}</td>
                    <td>{{item.title}}</td>
                    <td>{{item.price_info}}</td>
                    <td><button @click="del(index)">删除</button></td>
                </tr>
                <tr>
                    <td colspan="4">总价格{{total | keyTwo}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        name: '',
        components: {

        },
        props: ['titles', 'info', 'total'],
        data() {
            return {
                searchTxt: ''
            };
        },
        methods: {
            del(index) {
                this.$emit('del', index)
            },
            search() {
                if (this.searchTxt.trim()) {
                    this.$emit('search', this.searchTxt)
                }
            },
            searchTxtChange(e) {
                if (e.target.value == '') {
                    this.$emit('showall')
                }
            }
        },
        filters: {
            keyTwo(val) {
                return val.toFixed(2)
            }
        },
        watch: {

        },
        computed: {

        },
    };
</script>

<style scoped lang="less">
    table {
        width: 600px;
        margin: 10px auto;
        border: 1px solid #ddd;
        border-collapse: collapse;
        color: #666;
        font-size: 14px;
    }

    table th {
        width: 100px;
        border: 1px solid #ddd;
    }

    table tr {
        height: 70px;
    }

    table td {
        padding-left: 10px;
        border: 1px solid #ddd;
    }

    button {
        height: 30px;
        width: 50px;
        color: #fff;
        text-align: center;
        border-radius: 4px;
        border: none;
        background-color: #87CEEB;
    }

    .seatchContainer {
        color: #666;
        font-size: 14px;
        text-align: center;
    }

    .seatchContainer input {
        margin: 0 30px;
        height: 30px;
        width: 200px;
        border: 1px solid #ddd;
        border-radius: 4px;
        outline: none;
    }
</style>